<script setup>

import api from './api'

const openFlag = ref(false);
let websocket = null;

const device = ref({
  id: null,
  name: null,
  running: false,
  messageList: []
});

function open(row) {
  const deviceId = row.id;
  openFlag.value = true;
  device.value.id = deviceId;
  getDetail();

}

/**
 * 建立Websocket
 */
function createWebsocket() {

  const deviceObj = device.value;
  const deviceId = deviceObj.id;
  const deviceName = deviceObj.name;
  websocket = new WebSocket(`ws://localhost:2883/${deviceId}`);
  websocket.onopen = () => {
    console.log(`设备${deviceName}连接已建立`);
  }

  websocket.onmessage = function(event) {
    device.value.messageList.push(event.data);
    console.log('收到消息:', event.data);
  };

  websocket.onclose = () => {
    console.log(`设备${deviceName}连接已关闭`);
  }
}

function getDetail() {
  const id = device.value.id;
  api.getDeviceDetail(id).then(response => {
    device.value = response;
    createWebsocket();
  })
}

function onClose() {
  if (websocket) {
    websocket.close();
  }
}

defineExpose({
  open
})

</script>

<template>

  <el-dialog v-model="openFlag" title="消息" @close="onClose">
    <div class="device-container">
      <div class="device">
        <div class="device-header">
          <div class="title">
            <span class="breath-light" :class="{'active': device.running}"></span> {{device.name}}
          </div>
        </div>
        <div class="message-container">
          <div v-for="(message, index) in device.messageList" :key="index">
            <div class="message-header">{{ message.from }}</div>
            <div class="comment_bubble">{{ message }}</div>
          </div>
        </div>

      </div>
    </div>


  </el-dialog>

</template>

<style scoped lang="scss">

.device {

  height: 400px;
  width: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-right: 20px;

  .device-header {
    border-bottom: 1px solid #ccc;

    display: flex;
    padding: 3px 10px;
    .title {
      flex-grow: 1;
    }
    .breath-light {
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: inline-block;
      line-height: 20px;
      margin-right: 10px;
      background-color: #ccc;
      &.active {
        background-color: #00dd00;
        animation: breathe 3s linear infinite;
      }
    }
    .toolbar {
      button {
        margin-right: 5px;
      }
    }
  }

  .message-container {
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    .comment_bubble {
      width: max-content;
      height: auto;
      background: #cfffcc;
      position: relative;
      border-radius: 5px;
      padding: 2px 10px;
      max-width: 200px;
    }

  }

}

@keyframes breathe {
  0%{
    transform: scale(1);
    box-shadow: 0 0 2px #00dd00;
  }
  50%{
    transform: scale(1.5);
    box-shadow: 0 0 10px #00dd00;
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 2px #00dd00;
  }
}
</style>